/**
 * 运动数据
 */
require("../css/sportData.less");
require("../fonts/iconfont.css");
console.log("sportData.js");
document.ready(function () {
    // 绘制近7天运动市场
    function drawWeekTimeChart(xData, yData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('weekTimeChart'));

        // 写配置 【查看官方文档 该配置 就可以了】
        var option = {
            // 标题
            title: {
                text: '近7天运动时长',
            },

            // 网格
            grid: {
                show: true,
                left: '10%',
                // backgroundColor: 'red',
            },

            // x轴
            xAxis: {
                type: 'category',
                data: xData,
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            series: [{
                data: yData,
                type: 'bar',
                itemStyle: {
                    color: 'green'
                },
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    // drawWeekTimeChart()


    // 绘制饼图： 运动分类
    function drawPie(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sportCateChart'));

        // 写配置 【查看官方文档 该配置 就可以了】
        var option = {
            title: {
                text: '运动分类',
            },
            tooltip: {
                trigger: 'item',
                formatter: '{d}%'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                data: ['跑步', '骑行', '训练']
            },
            series: [{
                name: '运动分类',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                label: {
                    position: 'inside',
                    formatter: "{d}%",
                },
                data: data, // 动态数据
                // 激活效果
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    //绘制堆叠图：近7日运动分类
    // 近7日运动分类
    function drawWeekStackedFigure(yData, runData, exData, rideData) {
        let myChart = echarts.init(document.querySelector("#weekSportChart"))
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['跑步', '骑行', '训练'],
                right: -5,
                top: 60,
                width: 20
            },
            xAxis: {
                type: 'value',
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: yData
            },
            series: [{
                    name: '跑步',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: runData
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: rideData
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: exData
                },
            ]
        }
        myChart.setOption(option)
    }

    // 近7日运动次数
    function weekNum(xData, exData) {
        let myChart = echarts.init(document.querySelector("#trainChart"))
        let option = {
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: exData,
                type: 'line'
            }]
        };
        myChart.setOption(option)
    }

    // 发送ajax 获取运动数据
    window.$http.get(`sport/data/${window.localStorage.getItem('userId')}`, function (res) {
        if (res.status === 0) {
            const back = document.querySelector(".icon-back")
            back.addEventListener("click", function () {
                window.location.href = './mine.html'
            })
            const sumtime = document.querySelector("#sumtime")
            const weekcalorie = document.querySelector("#weekcalorie")
            const sumcalorie = document.querySelector("#sumcalorie")
            const sumdays = document.querySelector("#sumdays")
            const sumcontinuity = document.querySelector("#sumcontinuity")

            sumtime.textContent = res.data.sumTimes
            weekcalorie.textContent = window.utils.calCalorie(res.data.sumTimes)
            sumcalorie.textContent = window.utils.calCalorie(res.data.sumTimes)
            sumdays.textContent = res.data.sumDays
            sumcontinuity.textContent = res.data.continueDays

            let days = res.data.days;

            let xData = days.map(function (v) {
                return v.date.substr(-5)
            })
            let yData = days.map(function (v) {
                return +v.dayTimes
            })


            // 使用动态数据渲染柱状图
            drawWeekTimeChart(xData, yData)

            // 定义对象
            let obj = {
                '跑步': 0,
                '训练': 0,
                '骑行': 0
            }

            // 对分类数据进行归类
            days.forEach(function (v) {
                v.exerciseData.forEach(function (item) {
                    obj[item.type] += parseInt(item.time)
                })
            })

            // 处理成echarts需要的数据
            let data = []
            for (let key in obj) {
                data.push({
                    name: key,
                    value: obj[key]
                })
            }
            // 渲染
            drawPie(data)
            let runData = []
            let exData = []
            let rideData = []
            res.data.days.forEach(function (v) {
                v.exerciseData.forEach(function (item) {
                    if (item.type == '跑步') {
                        runData.push(item.time)
                    } else {
                        runData.push(0)
                    }
                    if (item.type == '训练') {
                        exData.push(item.time)
                    } else {
                        exData.push(0)
                    }
                    if (item.type == '骑行') {
                        rideData.push(item.time)
                    } else {
                        rideData.push(0)
                    }
                })
            })
            drawWeekStackedFigure(xData, runData, exData, rideData)

            let exData2 = []
            res.data.days.forEach(function (v) {
                v.exerciseData.forEach(function (item) {
                    if (item.type == '训练') {
                        exData2.push(item.numberoftimes)
                    } else {
                        exData2.push(0)
                    }
                })
            })
            weekNum(xData, exData2)
        }

    })

})